@extends('layout.main')
@section('content')
    <div class="col-sm-8">
        <blockquote>
            <p><img src="" alt="" class="img-rounded"
                    style="border-radius:500px; height: 40px"> {{$user->nickname}}
            </p>
            @if($user->id != \Auth::id())
                <div>
                    <a class="btn btn-primary like-button" href="javascript:void(0)" onclick="concern(this)"
                       data-id="{{$user->id}}">@if($user->concerned == true)取消关注@else 关注 @endif</a>
                </div>
            @endif
            <br>
            <footer>关注：{{$user->stars_count}}｜粉丝：{{$user->fans_count}}｜文章：{{$user->posts_count}}</footer>
        </blockquote>
    </div>
    <div class="col-sm-8 blog-main">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">文章</a></li>
                <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">关注</a></li>
                <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">粉丝</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_1">
                    @foreach($user->posts as $post)
                        <div class="blog-post" style="margin-top: 30px">
                            <p class=""><a href="/user/{{$post->user_id}}">{{$user->nickname}}</a> {{$post->created_at->diffForHumans()}}</p>
                            <p class=""><a href="/posts/{{$post->id}}">{{$post->title}}</a></p>

                            <p>{!! str_limit($post->content,100,'...') !!}</p>
                        </div>
                    @endforeach
                </div>
                <!-- /.tab-pane -->
                <div class="tab-pane" id="tab_2">
                    @foreach($user->stars as $star)
                        <div class="blog-post" style="margin-top: 30px">
                            <p class="">{{$star->nickname}}</p>
                            <p class="">关注：{{$star->stars_count}} | 粉丝：{{$star->fans_count}}｜ 文章：{{$star->posts_count}}</p>
                            @if($star->id != \Auth::id())
                                <div>
                                    <a class="btn btn-primary like-button" href="javascript:void(0)" onclick="concern(this)"
                                       data-id="{{$star->id}}">@if($star->concerned == true)取消关注@else 关注 @endif</a>
                                </div>
                            @endif


                        </div>
                    @endforeach

                </div>
                <!-- /.tab-pane -->
                <div class="tab-pane" id="tab_3">
                    @foreach($user->fans as $fan)
                        <div class="blog-post" style="margin-top: 30px">
                            <p class="">{{$fan->nickname}}</p>
                            <p class="">关注：{{$fan->stars_count}} | 粉丝：{{$fan->fans_count}}｜ 文章：{{$fan->posts_count}}</p>
                            @if($fan->id != \Auth::id())
                                <div>
                                    <a class="btn btn-primary like-button" href="javascript:void(0)" onclick="concern(this)"
                                       data-id="{{$fan->id}}">@if($fan->concerned == true)取消关注@else 关注 @endif</a>
                                </div>
                            @endif


                        </div>
                    @endforeach
                </div>
                <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
        </div>
    </div><!-- /.blog-main -->
    <script>
        function concern(tag) {
            id = $(tag).data('id');

            $.ajax({
                url: "/user/" + id + "/concern",
                type: "POST",
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': "{{csrf_token()}}"
                },
                success: function (data) {
                    if (data.code == 0) {
                        $(tag).html(data.message);
                    }
                },
                error: function () {
                    swal('请求超时，稍后再试', '', 'error');
                }
            })
        }
    </script>
@endsection


